<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改密码页</title>
    <!-- Custom fonts for this template-->
    <link th:href="@{/vendor/fontawesome-free/css/all.css}" rel="stylesheet" >
    <!-- Custom styles for this template-->
    <link th:href="@{/css/sb-admin.css}" rel="stylesheet">
    <!-- Bootstrap core JavaScript-->
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <!-- Core plugin JavaScript-->
    <script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>

</head>
<body  style="background-image:url('imag/imag.png');background-size: 100% 100%;">

<div class="container">
    <div class="card card-register mx-auto mt-5">
        <div class="card-header">修改密码
            <div style="float:right">
                <a class="btn btn-primary btn-sm" th:href="@{/toLogin}" >返回登录页</a></div>
        </div>
        <div class="card-body">
            <form method="post" th:action="@{/resetPassword}">
                <div class="form-group">
                    <div class="form-label-group">
                        <input type="email" id="email" class="form-control" placeholder="邮箱" required name="email">
                        <label for="email" style="color: red">邮箱*</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row">
                        <div class="col-md-6">
                            <div class="form-label-group">
                                <input type="text" id="code" class="form-control" placeholder="验证码" required name="code">
                                <label for="code" style="color: red">验证码*</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-label-group">
                                <button class="btn btn-primary btn-lg" type="button" id="getCode">获取验证码</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-row">
                        <div class="col-md-6">
                            <div class="form-label-group">
                                <input type="password" id="password" class="form-control" placeholder="密码" required name="password">
                                <label for="password" style="color: red">密码*</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-label-group">
                                <input type="password" id="confirmPassword" class="form-control" placeholder="确认密码" required name="confirmPassword">
                                <label for="confirmPassword" style="color: red">确认密码*</label>
                            </div>
                        </div>
                    </div>
                </div>
                    <button type="submit" class="btn btn-primary btn-block" id="register">提交</button>
            </form>
        </div>


    </div>
</div>
</body>

<script>

    //点击获取验证码，向该邮箱发送邮件
    $("#getCode").click(function () {
        var email=$("#email").val();
        if(email!=""){
            $.ajax({
                url:"http://localhost:8088/email/"+email,
                type:"GET",
                success:function (result) {
                    if(result.code==200){
                        alert("该邮箱还没有注册记录!!!");
                        return;
                    }else{
                        alert("已向"+email+"发送验证码!!!");
                        $.ajax({
                            url:"http://localhost:8088/email/sendCode/"+email,
                            type:"GET"
                        });
                    }
                }
            });
        }
        else{
            alert("请先输入邮箱地址！！！")
        }
    });

</script>

</html>